<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Scale</view>
			<view class="tui-page__desc">缩放以及其他效果</view>
		</view>
		<view class="tui-page__bd tui-page__spacing">
			<view class="tui-section__title">switch</view>
			<view class="thorui-flex">
				<switch class="tui-scale__small" color="#5677fc" checked></switch>
				<switch class="tui-scale__mini" color="#EB0909"></switch>
				<switch></switch>
				<switch class="tui-scale__large" color="#07c160"></switch>
			</view>
			<view class="tui-section__title">radio</view>
			<view class="thorui-flex">
				<radio-group>
					<radio class="tui-scale__small" color="#EB0909" checked></radio>
					<radio class="tui-scale__mini"></radio>
					<radio></radio>
					<radio class="tui-scale__large"></radio>
				</radio-group>
			</view>

			<view class="tui-section__title">text</view>
			<view class="thorui-flex"><view class="tui-text tui-scale__mini">缩放字体大小低于24rpx</view></view>
			<view class="tui-section__title">不占据原来空间</view>
			<!--使用scale时可以计算缩放距离，用margin负值来解决-->
			<switch class="tui-zoom__small" color="#5677fc" checked></switch>
			<switch color="#EB0909" checked></switch>
			<view class="tui-section__title tui-top__60">点赞效果（请点击图标）</view>
			<view class="tui-fabulous__box">
				<tui-icon :name="fabulous ? 'agree-fill' : 'agree'" :color="fabulous ? '#f74d54' : '#999'" @click="fabulousFun"></tui-icon>
				<view class="tui-fabulous" :class="{ 'tui-fabulous__active': fabulous }"><tui-icon name="agree-fill" color="#f74d54"></tui-icon></view>
			</view>
			<!-- <view @tap="aniFun" style="margin-bottom: 140rpx;"><view class="tui-heart" :class="{ 'tui-heart__ani': active }" :style="{ backgroundPosition: aniPosition }"></view></view> -->
			
			<view class="tui-section__title" >旋转（2D&3D旋转）</view>
			<veiw>
				<image src="/static/images/my/mine_avatar_3x.jpg" class="tui-avatar tui-rotate__2d"></image>
				<image src="/static/images/my/mine_avatar_3x.jpg" class="tui-avatar tui-rotate__3d"></image>
			</veiw>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fabulous: false,
			active: false,
			aniPosition: 'left'
		};
	},
	methods: {
		aniFun() {
			this.active = !this.active;
			this.aniPosition = this.active ? 'right' : 'left';
		},
		fabulousFun() {
			this.fabulous = !this.fabulous;
		}
	}
};
</script>

<style>
.container {
	padding-bottom: 120rpx;
}
.tui-scale__large {
	transform: scale(1.2);
	transform-origin: 0 center;
}

.tui-scale__mini {
	transform: scale(0.8);
	transform-origin: 0 center;
}

.tui-scale__small {
	transform: scale(0.6);
	transform-origin: 0 center;
}

.tui-zoom__small {
	zoom: 0.6;
}

.tui-text {
	font-size: 24rpx;
}
.tui-top__60 {
	margin-top: 60rpx;
}

/*点赞 */

.tui-fabulous__box {
	position: relative;
}
.tui-fabulous {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
}

.tui-fabulous__active {
	animation: fabulousAni 1s linear;
}
@keyframes fabulousAni {
	0% {
		transform: translateY(0) scale(0.8);
		visibility: visible;
		opacity: 1;
	}

	15% {
		transform: translateY(-40px) scale(1.25);
		opacity: 1;
	}

	100% {
		transform: translateY(-240px) scale(0.5);
		visibility: hidden;
		opacity: 0;
	}
}

/* 红心点赞效果  */

.tui-heart {
	background: url(https://thorui.cn/extend/common/heart_animation.png);
	background-position: left;
	background-repeat: no-repeat;
	height: 160rpx;
	width: 200rpx;
	cursor: pointer;
	position: absolute;
	left: -30rpx;
	background-size: 2900%;
}
@keyframes heartBlast {
	0% {
		background-position: left;
	}

	100% {
		background-position: right;
	}
}

.tui-heart__ani {
	display: inline-block;
	animation-name: heartBlast;
	animation-duration: 0.8s;
	animation-iteration-count: 1;
	animation-timing-function: steps(28);
	background-position: right;
}

/*旋转*/
.tui-avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	margin-right: 40rpx;
}

.tui-rotate__2d {
	animation: rotate2d 4s linear infinite;
}

@keyframes rotate2d {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.tui-rotate__3d {
	animation: rotate3d 4s linear infinite;
}
@keyframes rotate3d {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}
</style>
